import {
  IndexTable,
  LegacyCard,
  useIndexResourceState,
  Text,
  Badge,
  Button,
  TextField,
  Link,
  Thumbnail,
  Popover,
  ActionList,
  ChoiceList,
} from "@shopify/polaris";

import styled from "./Tables.module.less";
import { PostProductRiceTextTablesApi } from "../../../../api/product";

import { useState, useCallback, useEffect } from "react";

function IndexFiltersDefaultExample() {
  //价格
  const [customers, setCustomers] = useState("0.00");

  const handlecustomerChange = useCallback(
    (newValue: string) => setCustomers(newValue),
    []
  );
  //有货
  const [value, setValue] = useState("0.00");

  const handleChange = useCallback(
    (newValue: string) => setValue(newValue),
    []
  );

  //SKU1
  const [SKUs1, setSKUs1] = useState("0.00");

  const handleSKUsChange1 = useCallback(
    (newValue: string) => setSKUs1(newValue),
    []
  );
  //SKU2
  const [SKUs, setSKUs] = useState("0.00");

  const handleSKUsChange = useCallback(
    (newValue: string) => setSKUs(newValue),
    []
  );

  const orders = [
    {
      id: "1020",
      order: "大",
      date: "橡胶",
      customer: "0.00",
      total: "999",
      paymentStatus: "999",
      now: 0,
      SKU: (
        <div style={{ width: "80px" }}>
          <TextField
            label=""
            value={SKUs1}
            onChange={handleSKUsChange1}
            autoComplete="off"
          />
        </div>
      ),
    },
    {
      id: "1019",
      order: "大",
      date: "啊啊",
      customer: "0.00",
      total: "0",
      paymentStatus: "0",
      now: 0,
      SKU: (
        <div style={{ width: "80px" }}>
          <TextField
            label=""
            value={SKUs}
            onChange={handleSKUsChange}
            autoComplete="off"
          />
        </div>
      ),
    },
  ];
  const resourceName = {
    singular: "order",
    plural: "orders",
  };

  const {
    selectedResources,
    clearSelection,
    allResourcesSelected,
    handleSelectionChange,
    removeSelectedResources,
  } = useIndexResourceState(orders);

  const rowMarkup = orders.map(
    ({ id, order, date, customer, total, paymentStatus, now, SKU }, index) => (
      <IndexTable.Row
        id={id}
        key={id}
        selected={selectedResources.includes(id)}
        position={index}
      >
        <IndexTable.Cell>
          <Thumbnail
            source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
            alt="Black choker necklace"
          />
        </IndexTable.Cell>
        <IndexTable.Cell>{order + "/" + date}</IndexTable.Cell>
        <IndexTable.Cell>{customer}</IndexTable.Cell>
        <IndexTable.Cell>{total}</IndexTable.Cell>
        <IndexTable.Cell>{paymentStatus}</IndexTable.Cell>
        <IndexTable.Cell>{now}</IndexTable.Cell>
        <IndexTable.Cell>{SKU}</IndexTable.Cell>
        <IndexTable.Cell>
          <div></div>
        </IndexTable.Cell>
      </IndexTable.Row>
    )
  );

  const promotedBulkActions = [
    {
      content: "批量编辑",
      onAction: () => console.log("Todo: implement bulk edit"),
    },
  ];
  const bulkActions = [
    {
      content: "编辑价格",
      onAction: () => console.log("Todo: implement bulk add tags"),
    },
    {
      content: "编辑数量",
      onAction: () => console.log("Todo: implement bulk remove tags"),
    },
    {
      content: "编辑SKU",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
    {
      content: "编辑条码",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
    {
      content: "编辑重量",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
    {
      content: "编辑HS代码",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
    {
      content: "编辑原产地",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
    {
      content: "添加图片",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
    {
      content: "删除图片",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
    {
      content: "删除多属性",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
    {
      content: "缺货后继续销售",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
    {
      content: "缺货后停止销售",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
    {
      content: "重复多属性",
      // disabled: true,
      // prefix: <div style={{ display: "flex" }}>重复多属性</div>,
    },
    {
      content: "...在另一个尺寸",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
    {
      content: "...在另一个材料",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
  ];

  //尺寸
  const [popoverActive, setPopoverActive] = useState(false);

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    []
  );

  const activator = (
    <Button onClick={togglePopoverActive} plain disclosure>
      尺寸
    </Button>
  );

  const [selected, setSelected] = useState<string[]>([]);

  const handleselectedChange = useCallback((value: string[]) => {
    setSelected(value);
    console.log(value);
    handleSelectionChange(SelectionType.Multi, true);
  }, []);
  //材料
  const [popoverActive1, setPopoverActive1] = useState(false);

  const togglePopoverActive1 = useCallback(
    () => setPopoverActive1((popoverActive1) => !popoverActive1),
    []
  );

  const activator1 = (
    <Button onClick={togglePopoverActive1} plain disclosure>
      材料
    </Button>
  );

  enum SelectionType {
    All = "all",
    Page = "page",
    Multi = "multi",
    Single = "single",
  }

  //数据
  useEffect(() => {
    PostProductRiceTextTablesApi({
      format: "json",
      key_to_array: 1,
      method: "get.product.spec.config",
      product_id: "498954570895360",
      sign: "b120200c72269fac86ed85faa1d3807a",
      store_locale: "en_US",
      timestamp: 1691715884,
      token: "9d486d74d765e9b033ee6f667d137a0a",
    }).then((res) => {
      console.log(res);
    });
  }, []);

  return (
    <LegacyCard>
      <div className={styled.Fitlers}>
        <div className={styled.btngroup}>
          <div>选择</div>
          <div className={styled.plain}>
            <Button
              plain
              onClick={() => {
                handleSelectionChange(SelectionType.Page, true);
              }}
            >
              所有
            </Button>
          </div>
          <div>
            <Button
              plain
              onClick={() => {
                clearSelection();
              }}
            >
              无
            </Button>
          </div>
          <div className={styled.plain}>
            <Popover
              active={popoverActive}
              activator={activator}
              autofocusTarget="first-node"
              onClose={togglePopoverActive}
            >
              <Popover.Pane>
                <div
                  style={{
                    width: "100px",
                    display: "flex",
                    justifyContent: "center",
                  }}
                >
                  <ChoiceList
                    allowMultiple
                    title=""
                    choices={[
                      {
                        label: "大",
                        value: "1018",
                      },
                    ]}
                    selected={selected}
                    // onChange={() => {
                    //   handleselectedChange(["1018"]);
                    //   handleSelectionChange(SelectionType.All, true);
                    // }}
                    onChange={handleselectedChange}
                  />
                </div>
              </Popover.Pane>
            </Popover>
          </div>
          <div>
            <Popover
              active={popoverActive1}
              activator={activator1}
              autofocusTarget="first-node"
              onClose={togglePopoverActive1}
            >
              <div
                style={{
                  width: "100px",
                  display: "flex",
                  justifyContent: "center",
                }}
              >
                <ChoiceList
                  allowMultiple
                  title=""
                  choices={[
                    {
                      label: "橡胶",
                      value: "1019",
                      // helpText: <div>666</div>,
                    },
                    {
                      label: "啊啊",
                      value: "1020",
                    },
                  ]}
                  selected={selected}
                  onChange={handleselectedChange}
                />
              </div>
            </Popover>
          </div>
        </div>
        <div className={styled.plain}>
          <Button plain>添加多属性</Button>
        </div>
      </div>
      <IndexTable
        bulkActions={bulkActions}
        promotedBulkActions={promotedBulkActions}
        resourceName={resourceName}
        itemCount={orders.length}
        selectedItemsCount={
          allResourcesSelected ? "All" : selectedResources.length
          // "All"
        }
        onSelectionChange={handleSelectionChange}
        headings={[
          { title: "" },
          { title: "多属性" },
          { title: "价格" },
          { title: "有货", tooltipContent: "你商店的可售库存" },
          {
            title: "现有",
            tooltipContent: (
              <div>
                某个地点的总库存量。这是指 <strong>有货</strong> 和{" "}
                <strong>已提交</strong> 商品数量的总和
              </div>
            ),
          },
          { title: "承诺", tooltipContent: "属于未发货订单的库存" },
          { title: "SKU" },
        ]}
      >
        {rowMarkup}
      </IndexTable>
    </LegacyCard>
  );
}

export default IndexFiltersDefaultExample;
